.container {
  width: 100%;
  min-height: 100vh;
  .top {
    width: 100%;
    height: 340rpx;
    z-index: 0;
    display: block;
    position: absolute;
  }
  .main {
    position: absolute;
    min-height: 300rpx;
    width: 100%;
    top: 250rpx;
    background: #ffffff;
    // padding: 32rpx;
    box-sizing: border-box;
    border-radius: 32rpx 32rpx 0 0;
    .order {
      width: 100%;
      box-sizing: border-box;
      padding: 32rpx;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      text {
        font-size: 28rpx;
        color: #333333;
        flex-shrink: 0;
        line-height: 53rpx;
      }
      > view {
        display: flex;
        gap: 16rpx;
        font-size: 24rpx;
        flex-wrap: wrap;
        justify-content: flex-end;
        > view {
          padding: 12rpx 20rpx;
          background: #f6f6f6;
          border-radius: 12rpx;
          color: #666666;
          &.active {
            color: #ffffff;
            background: #73F0EA;
          }
        }
      }
    }
    .list {
      padding: 0 32rpx;
      box-sizing: border-box;
    }
    .th,
    .td {
      display: grid;
      grid-template-columns: repeat(19, 1fr); /* 24等分列 */
      > view {
        grid-column: span 4;
        &:first-child {
          grid-column: span 3;
        }
      }
    }
    .th {
      font-size: 28rpx;
      color: #999999;
    }
    .td {
      padding: 22rpx 0;
      & + .td {
        border-top: 1px solid #e9e9e9;
      }
      > view {
        grid-column: span 16;
        &:first-child {
          grid-column: span 3;
          gap: 6rpx;
          > view {
            display: flex;
            align-items: center;

            image.ranking {
              width: 52rpx;
              height: 70rpx;
              display: block;
              flex-shrink: 0;
            }
            view.ranking {
              width: 48rpx;
              height: 48rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background-color: #f6f6f6;
              font-size: 24rpx;
              font-weight: bold;
              flex-shrink: 0;
              margin-right: 5rpx;
            }
            > view {
              display: flex;
              align-items: flex-end;
              font-size: 24rpx;
              font-weight: bold;
              line-height: 1;
            }

            image {
              width: 14rpx;
              height: 16rpx;
              display: block;
            }
          }
        }
        &.info {
          > text {
            color: #333333;
            font-weight: bold;
            font-size: 32rpx;
          }
          > view {
            margin-top: 26rpx;
            display: flex;
          }
        }
        .up {
          color: #f37364;
        }
        .down {
          color: #47cc88;
        }
        .flat {
          image {
            height: 3rpx;
          }
        }
      }
      .text {
        width: 25%;
        flex-shrink: 0;
        font-size: 24rpx;
        font-weight: bold;
        flex-direction: column;
        > view {
          font-weight: normal;
          margin-top: 6rpx;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
  .placeholder {
    height: 300rpx;
  }
  .my-user {
    position: fixed;
    width: 100%;
    background: #f6f6f6;
    left: 0;
    bottom: 0;
    padding: 22rpx 32rpx calc(22rpx + env(safe-area-inset-bottom) / 2);
  }
}
